<template>
  <div class="booking">
    <div class="sights-booking">
      <MiniTitleView :title="'景点预约'"></MiniTitleView>
      <el-tabs tab-position="left" @tab-click="handleClickSights">
        <el-tab-pane label="已取消" name="0" v-loading="sightsBookingLoading">
          <div v-if="sightsBookingList.length !== 0">
            <MiniBookingItem
              :dataList="sightsBookingList"
              :type="'sights'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="sightsBookingList.length > 0"
              layout="prev, pager, next"
              :total="sightsBookingTotal"
              :current-page="sightsBookingCurrentPage"
              :page-size="sightsBookingPageSize"
              @current-change="handleSightsBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已预约" name="1" v-loading="sightsBookingLoading">
          <div v-if="sightsBookingList.length !== 0">
            <MiniBookingItem
              :dataList="sightsBookingList"
              :type="'sights'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="sightsBookingList.length > 0"
              layout="prev, pager, next"
              :total="sightsBookingTotal"
              :current-page="sightsBookingCurrentPage"
              :page-size="sightsBookingPageSize"
              @current-change="handleSightsBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已使用" name="2" v-loading="sightsBookingLoading">
          <div v-if="sightsBookingList.length !== 0">
            <MiniBookingItem
              :dataList="sightsBookingList"
              :type="'sights'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="sightsBookingList.length > 0"
              layout="prev, pager, next"
              :total="sightsBookingTotal"
              :current-page="sightsBookingCurrentPage"
              :page-size="sightsBookingPageSize"
              @current-change="handleSightsBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已过期" name="-1" v-loading="sightsBookingLoading">
          <div v-if="sightsBookingList.length !== 0">
            <MiniBookingItem
              :dataList="sightsBookingList"
              :type="'sights'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="sightsBookingList.length > 0"
              layout="prev, pager, next"
              :total="sightsBookingTotal"
              :current-page="sightsBookingCurrentPage"
              :page-size="sightsBookingPageSize"
              @current-change="handleSightsBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="hotel-booking">
      <MiniTitleView :title="'酒店预约'"> </MiniTitleView>
      <el-tabs tab-position="left" @tab-click="handleClickHotel">
        <el-tab-pane label="已取消" name="0" v-loading="hotelBookingLoading">
          <div v-if="hotelBookingList.length !== 0">
            <MiniBookingItem
              :dataList="hotelBookingList"
              :type="'hotel'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="hotelBookingList.length > 0"
              layout="prev, pager, next"
              :total="hotelBookingTotal"
              :current-page="hotelBookingCurrentPage"
              :page-size="hotelBookingPageSize"
              @current-change="handleHotelBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已预约" name="1" v-loading="hotelBookingLoading">
          <div v-if="hotelBookingList.length !== 0">
            <MiniBookingItem
              :dataList="hotelBookingList"
              :type="'hotel'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="hotelBookingList.length > 0"
              layout="prev, pager, next"
              :total="hotelBookingTotal"
              :current-page="hotelBookingCurrentPage"
              :page-size="hotelBookingPageSize"
              @current-change="handleHotelBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已使用" name="2" v-loading="hotelBookingLoading">
          <div v-if="hotelBookingList.length !== 0">
            <MiniBookingItem
              :dataList="hotelBookingList"
              :type="'hotel'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="hotelBookingList.length > 0"
              layout="prev, pager, next"
              :total="hotelBookingTotal"
              :current-page="hotelBookingCurrentPage"
              :page-size="hotelBookingPageSize"
              @current-change="handleHotelBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="已过期" name="-1" v-loading="hotelBookingLoading">
          <div v-if="hotelBookingList.length !== 0">
            <MiniBookingItem
              :dataList="hotelBookingList"
              :type="'hotel'"
              :other="true"
            ></MiniBookingItem>
            <!-- 分页 -->
            <el-pagination
              v-show="hotelBookingList.length > 0"
              layout="prev, pager, next"
              :total="hotelBookingTotal"
              :current-page="hotelBookingCurrentPage"
              :page-size="hotelBookingPageSize"
              @current-change="handleHotelBookingCurrentChange"
              :page-count="7"
              style="text-align: right; margin-top: 24px"
            >
            </el-pagination>
          </div>
          <el-empty v-else description="暂无预约信息"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getHotelBookingList, getSightsBookingList } from "@/api/user/booking";
import MiniBookingItem from "@/components/MiniBookingItem.vue";
import MiniTitleView from "@/components/MiniTitleView.vue";

export default {
  name: "Booking",
  props: ["id"],
  components: {
    MiniTitleView,
    MiniBookingItem,
  },
  data() {
    return {
      sightsBookingList: [],
      sightsBookingPage: 1,
      sightsBookingPageSize: 10,
      sightsBookingCurrentPage: 1,
      sightsBookingTotal: 0,
      sightsBookingLoading: false,
      sightsStatus: 0,

      hotelBookingList: [],
      hotelBookingPage: 1,
      hotelBookingPageSize: 10,
      hotelBookingCurrentPage: 1,
      hotelBookingTotal: 0,
      hotelBookingLoading: false,
      hotelStatus: 0,
    };
  },
  created() {
    this.getSightsBookingList();
    this.getHotelBookingList();
  },
  methods: {
    // tab切换
    handleClickSights(tab, event) {
      this.sightsStatus = +tab.name;
      this.getSightsBookingList();
    },
    // tab切换
    handleClickHotel(tab, event) {
      this.hotelStatus = +tab.name;
      this.getHotelBookingList();
    },
    // 获取用户景点预约信息
    async getSightsBookingList() {
      try {
        this.sightsBookingLoading = true;
        const res = await getSightsBookingList({
          page: this.sightsBookingPage,
          pageSize: this.sightsBookingPageSize,
          userId: this.id,
          status: this.sightsStatus,
        });
        this.sightsBookingList = res.data.records;
        this.sightsBookingTotal = res.data.total;
      } catch {
        this.$message.error("获取预约信息失败");
      } finally {
        this.sightsBookingLoading = false;
      }
    },
    // 获取用户酒店预约信息
    async getHotelBookingList() {
      try {
        this.hotelBookingLoading = true;
        const res = await getHotelBookingList({
          page: this.hotelBookingPage,
          pageSize: this.hotelBookingPageSize,
          userId: this.id,
          status: this.hotelStatus,
        });
        this.hotelBookingList = res.data.records;
        this.hotelBookingTotal = res.data.total;
      } catch {
        this.$message.error("获取预约信息失败");
      } finally {
        this.hotelBookingLoading = false;
      }
    },
    // 分页
    handleSightsBookingCurrentChange(page) {
      this.sightsBookingPage = page;
      this.sightsBookingCurrentPage = page;
      this.getSightsBookingList();
    },
    // 分页
    handleHotelBookingCurrentChange(page) {
      this.hotelBookingPage = page;
      this.hotelBookingCurrentPage = page;
      this.getHotelBookingList();
    },
  },
};
</script>

<style lang="less" scoped>
.booking {
  .sights-booking {
    padding: 2px 20px 4px 0;
    min-height: 442px;
    box-shadow: 0 0 10px #ccc;
  }
  .hotel-booking {
    margin-top: 20px;
    padding: 2px 20px 4px 0;
    min-height: 442px;
    box-shadow: 0 0 10px #ccc;
  }
}
</style>